<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="modalBase" src="../modalBase.xml"/>

		<d:element name="modal" extends="b:modalBase">
			

			<d:resource type="text/css"><![CDATA[.btl-modal {
	position: absolute;
}
.btl-modal-head,
.btl-modal-head-right,
.btl-modal-head-mid {
	background-image: url(media/modalHead.png);
}
.btl-modal-head,
.btl-modal-head-right{
	background-repeat: no-repeat;
}
.btl-modal-head {
	cursor: move;
	padding-left: 4px;
	background-position: 0 -500px;
}
.btl-modal-head-right {
	padding-right: 4px;
	background-position: 100% -300px;
}
.btl-modal-head-mid {
	background-repeat: repeat-x;
	background-position: 0 -100px;
}
.btl-modal-label {
	cursor: move;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #919191;
}
.btl-modal-closeButton {
	width: 14px;
	height: 13px;
	margin-top: 4px;
	cursor: pointer;
	float: right;
	background-color: #000000;
	background-image: url(media/closeButton.png);
	background-position: -14px 0;
}
.btl-modal-content {
	position: relative;
	overflow: auto;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #C8C8C8;
	background-color: #FAFAFA;
}
.btl-modal-head .btl-icon {
	/* trying to optically center the icon */
	background-position: 4px 60%;
}
/* active */
.btl-modal-active .btl-modal-head {
	background-position: 0 -400px;
}
.btl-modal-active .btl-modal-head-right {
	background-position: 100% -200px;
}
.btl-modal-active .btl-modal-head-mid {
	background-position: 0 0;
}
.btl-modal-active .btl-modal-label {
	color: #000000;
}
.btl-modal-active .btl-modal-closeButton {
	background-position: 0 0;
}
.btl-modal-active .btl-modal-content {
	border-color: #919191;
	background-color: #EDEDED;
}
/* button states */
.btl-modal-closeButton-hover {
	background-position: 0 -13px;
}
.btl-modal-closeButton-press {
	background-position: 0 -26px;
}
/* fixes */
.ie .btl-modal {
	/* If content is bigger than size set to an element,
	IE will increase the size of the element by default.
	overflow: hidden cancels that */
	overflow: hidden;
}
.ie .btl-modal-closeButton {
	overflow: hidden;
}
.ie .btl-modal-label {
	width: 100%;
}
.ie .btl-modal-content {
	width: 100%;
}]]></d:resource>
			<d:resource type="image/png" src="media/modalHead.png"/>
			<d:resource type="image/png" src="media/closeButton.png"/>

			<d:template type="application/xhtml+xml">
				<div class="btl-modal btl-modal-closed btl-modal-active">
					<div class="btl-modal-head btl-dragMove">
						<div class="btl-modal-head-right">
							<div class="btl-modal-head-mid">
								<div class="btl-modal-closeButton"/>
								<textarea class="btl-modal-focus-before-start" tabindex="0" cols="1" rows="1"/>
								<a class="btl-modal-focus-start btl-modal-label btl-label" onclick="return false" href="#" tabindex="0"> </a>
							</div>
						</div>
					</div>
					<div class="btl-modal-content">
						<d:content/>
					</div>
					<textarea class="btl-modal-focus-end" tabindex="0" cols="1" rows="1"/>
					<textarea class="btl-modal-focus-after-end" tabindex="0" cols="1" rows="1"/>
				</div>
			</d:template>

			<d:attribute name="width" default="250px"/>

			<d:attribute name="useDragClass" default="true">
				
			</d:attribute>

			<d:property name="height">
				<d:setter type="text/javascript"><![CDATA[
					this.viewNode.style.height = value;
					this._._height = value;
					bb.ui.reflow(this, true, true);
				]]></d:setter>
			</d:property>

			<d:constructor type="text/javascript"><![CDATA[
				// disable user select on modal head
				var oHead = bb.selector.query(this.viewNode, '.btl-modal-head');
				bb.html.disableUserSelect(oHead);
			]]></d:constructor>

			<d:handler event="mousedown" match=".btl-modal-closeButton" type="text/javascript"><![CDATA[
				bb.html.addClass(event.currentView, 'btl-modal-closeButton-press');
				bb.html.replaceClass(event.currentView, 'btl-chameleon-highlightBackground', 'btl-chameleon-activeBackground');
			]]></d:handler>

			<d:handler event="mouseup" match=".btl-modal-closeButton" type="text/javascript"><![CDATA[
				bb.html.removeClass(event.currentView, 'btl-modal-closeButton-press');
				bb.html.replaceClass(event.currentView, 'btl-chameleon-activeBackground', 'btl-chameleon-highlightBackground');
			]]></d:handler>

			<d:handler event="mouseenter" match=".btl-modal-closeButton" type="text/javascript"><![CDATA[
				bb.html.addClass(event.currentView, ['btl-chameleon-highlightBackground', 'btl-modal-closeButton-hover']);
			]]></d:handler>

			<d:handler event="mouseleave" match=".btl-modal-closeButton" type="text/javascript"><![CDATA[
				bb.html.removeClass(event.currentView, ['btl-modal-closeButton-press', 'btl-chameleon-activeBackground']);
				bb.html.removeClass(event.currentView, ['btl-modal-closeButton-hover', 'btl-chameleon-highlightBackground']);
			]]></d:handler>

			<d:handler event="click" match=".btl-modal-closeButton" type="text/javascript"><![CDATA[
				this.close();
			]]></d:handler>

			<d:handler event="reflow" type="text/javascript"><![CDATA[
				var oElm = bb.selector.query(this.viewNode, '.btl-modal-content');
				if (this.hasAttribute('height') && this.getAttribute('height') !== 'auto') {
					btl.html.stretch(oElm);
				} else {
					oElm.style.height = '';
				}
			]]></d:handler>

			<d:handler event="dragStart" type="text/javascript"><![CDATA[
				if (event.viewTarget == bb.selector.query(this.viewNode, '.btl-modal-closeButton')){
					event.preventDefault();
				}
			]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>